﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Master/default.Master" AutoEventWireup="true" CodeBehind="Plan-Execution-Chart.aspx.cs" Inherits="NRCP.Plan_Execution_Chart" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="../Scripts/Highcharts/js/highcharts.js" type="text/javascript"></script>
    <script type="text/javascript">
        var chart;
        $(document).ready(function () {
            LoadPlanSummary();
        });
        function LoadPlanSummary() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'nationalPlanSummary',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Monthly Sample Collection Plan for year 2012',
                    x: -20 //center
                },

                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Total Samples'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                        'Total ' + this.y + ' in ' + this.x;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'Galda',
                    data: [0, 10, 15, 20, 25, 30, 32, 35, 36, 38, 40, 42]
                }, {
                    name: 'Bugda',
                    data: [40, 38, 35, 32, 30, 26, 23, 21, 20, 15, 0, 0]
                }, {
                    name: 'Harina',
                    data: [18, 22, 20, 20, 25, 22, 15, 16, 20, 22, 24, 25]
                }, {
                    name: 'Fish',
                    data: [8, 10, 12, 15, 18, 20, 19, 18, 14, 12, 9, 6]
                }]
            });

        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<br class="clearfix" />
<label>Select Plan Year</label>
    <select id="Select1">
        <option>2008</option>
        <option>2009</option>
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
    </select>
<br class="clearfix" />
<div id="nationalPlanSummary" class="grid_24">
</div>
</asp:Content>
